<template>
  <Search :schema="schema" @search="search" @reset="reset" />
  <Table
    v-model:pageSize="pageSize"
    v-model:currentPage="currentPage"
    :columns="tableColums"
    :data="dataList"
    row-key="id"
    :loading="loading"
    height="600"
    sortable
    :pagination="{ total: total }"
    @register="tableRegister"
  />
  <Dialog :title="title" v-model="visible" @close="visible = false">
    <Form :schema="formItem" @register="formRegister" />
  </Dialog>
</template>

<script lang="tsx" setup>
import { ref } from 'vue'
import { TableColumn, Table } from '@/components/Table'
import { BaseButton } from '@/components/Button'
import { useTable } from '@/hooks/web/useTable'
import { Search } from '@/components/Search'
import { Dialog } from '@/components/Dialog'
import { FormSchema, Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { formatToDateTime } from '@/utils/dateUtil'
import { innerWidth, formItemWidth, globalWidth } from '@/utils/styles'
import { listApi } from '@/api/rescueRecord'

// ----------------------搜索区域 start----------------------------------
const schema = ref<FormSchema[]>([
  {
    field: 'name',
    component: 'Input',
    componentProps: {
      placeholder: '请输入帮扶用户名',
      clearble: true
    }
  },
  {
    field: 'childName',
    component: 'Input',
    componentProps: {
      placeholder: '请输入儿童姓名',
      clearble: true
    }
  }
])

const searchParams = ref({})
const search = (form: any) => {
  searchParams.value = form
  currentPage.value = 1
  getList()
}

const reset = () => {
  // 将所有搜索值设置为空
  schema.value.forEach((item) => {
    item.value = ''
  })
  searchParams.value = {}
  currentPage.value = 1
  getList()
}
// ----------------------搜索区域 end------------------------------------

// ----------------------表格区域 start----------------------------------
const tableColums = ref<TableColumn[]>([
  {
    field: 'id',
    label: 'ID'
  },
  {
    field: 'guardianName',
    label: '发起人用户名',
    slots: {
      default: (scope: any) => {
        return <>{scope.row.guardianName}</>
      }
    }
  },
  {
    field: 'childName',
    label: '儿童姓名',
    slots: {
      default: (scope: any) => {
        return <>{scope.row.childName}</>
      }
    }
  },
  {
    field: 'guardianPhone',
    label: '发起人手机号',
    slots: {
      default: (scope: any) => {
        return <>{scope.row.guardianPhone}</>
      }
    }
  },
  {
    field: 'rescueName',
    label: '救助名称',
    slots: {
      default: (scope: any) => {
        return <>{scope.row.rescueName}</>
      }
    }
  },
  {
    field: 'rescueContent',
    label: '救助内容',
    slots: {
      default: (scope: any) => {
        return <>{scope.row.rescueContent}</>
      }
    }
  },
  {
    field: 'rescueImg',
    label: '救助图片',
    slots: {
      default: (scope: any) => {
        return <img src={scope.row.rescueImg} alt="救助图片" style="width: 50px; height: 50px;" />
      }
    }
  },
  {
    field: 'createTime',
    label: '创建时间',
    slots: {
      default: (scope: any) => {
        return <>{formatToDateTime(scope.row.createTime)}</>
      }
    }
  },
  {
    field: 'rescuerName',
    label: '救助用户名',
    slots: {
      default: (scope: any) => {
        return <>{scope.row.rescuerName}</>
      }
    }
  },
  {
    field: 'rescuerPhone',
    label: '救助用户手机号',
    slots: {
      default: (scope: any) => {
        return <>{scope.row.rescuerPhone}</>
      }
    }
  },
  {
    field: 'operations',
    label: '操作',
    width: '250px',
    show: true,
    slots: {
      default: (scope: any) => {
        return (
          <>
            <BaseButton type="primary" onClick={() => edit(scope.row)}>
              编辑
            </BaseButton>
          </>
        )
      }
    }
  }
])
// 引入tablemethods，包括getList
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    console.log('currentPage', currentPage.value, 'pageSize', pageSize.value)

    const res = await listApi({
      page: currentPage.value,
      pageSize: pageSize.value,
      ...searchParams.value
    })
    const { data } = res
    const ans = {
      list: data.items,
      total: data.total
    }
    return ans
  }
})

const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList } = tableMethods
// const { t } = useI18n()
// ----------------------表格区域 end------------------------------------

// ----------------------dialog区域 start--------------------------------
// 管理员列表标题
const title = ref('救助记录')
// 新增/修改控件
const isAdd = ref(true)
// 管理员弹窗控件
const visible = ref(false)

const delPassWd = (): FormSchema[] => {
  const newItem = ref<FormSchema[]>([])
  for (const item of formItem.value) {
    newItem.value.push(item)
  }
  return newItem.value as FormSchema[]
}

function edit(e: Announcement) {
  title.value = '编辑记录'
  isAdd.value = false
  formItem.value = delPassWd()
  formItem.value.forEach((item) => {
    if (item.field === 'isEnabled') {
      item.value = e[item.field] === 0 ? false : true
    } else {
      item.value = e[item.field]
    }
  })
  visible.value = true
}
// ----------------------dialog区域 end------------------------------------
// ----------------------表单区域 start------------------------------------
// 表单提交
// 表单结构
const formItem = ref<FormSchema[]>([
  {
    field: 'id',
    hidden: true
  },
  {
    field: 'rescueName',
    label: '救助名称',
    component: 'Input',
    colProps: formItemWidth,
    componentProps: innerWidth('请输入救助名称')
  },
  {
    field: 'rescueContent',
    label: '救助内容',
    component: 'Input',
    colProps: formItemWidth,
    componentProps: innerWidth('请输入救助内容')
  },
  {
    field: 'guardianName',
    label: '监护人姓名',
    component: 'Input',
    colProps: formItemWidth,
    componentProps: innerWidth('请输入监护人姓名')
  },
  {
    field: 'guardianPhone',
    label: '监护人手机号',
    component: 'Input',
    colProps: formItemWidth,
    componentProps: innerWidth('请输入监护人手机号')
  }
])
const { formRegister } = useForm()
// ----------------------表单区域 end------------------------------------
</script>
